<template>
	<view id="map-container1" class="overview-map1">
		<view class="col">
			<view class="row">
				<view class="search" style="width: 51%;">
					<input class="input" placeholder="请输入"  v-model="searchParams.baseTitle" />
					<view class="blue"  @click="goSearch">
						<image src="../../../static/images/search-white.png" class="blue-icon"></image>
					</view>
				</view>
				<view class="search" style="width: 37%;margin-left: 24rpx;">
					<div class="input-text">高级搜索</div>
					<view class="blue" @click="showSearch">
						<image src="../../../static/images/arrow-down-white.png" class="blue-icon" v-if="!isShowSearch"></image>
						<image src="../../../static/images/arrow-up-white.png" class="blue-icon" v-else></image>
					</view>
				</view>
				
			</view>
			<view class="search" style="width: 91%;margin-top:24rpx" v-if="!isShowSearch">
				<div class="input-text">全青岛</div>
				<view class="blue" @click="showCity">
					<image src="../../../static/images/arrow-up-white.png" class="blue-icon"  v-if="cityShow"></image>
					<image src="../../../static/images/arrow-down-white.png" class="blue-icon"  v-if="!cityShow"></image>
				</view>
			</view>
			
		 <view class="city-pp" v-if="cityShow">
		     <view v-for="(item,index) in areaList" :key="index">
			    <view class="city-p">
			      <view class="cityy" @click="searchRegion(item.adCode)">
			         <view class="city-p-text">{{ item.name}}</view>
			           <image src="../../../static/images/arrow-up.png" class="city-arrow"  v-if="item.adCode == clickAreaCode"></image>
			             <image src="../../../static/images/arrow-down.png" class="city-arrow" v-else></image>
			     </view>
			  <view v-if="clickAreaCode == item.adCode" style="width:100%">
			          <view class="cityy-item" v-for="(child,child_index) in streetList" :key="child_index" @click="clickStreet(child,child_index)">
							<image v-if="clickStreetIndex==child_index" src="../../../static/images/city-y.png" class="cityy-icon" ></image>
			                <image v-else src="../../../static/images/city-n.png" class="cityy-icon" ></image>
			              <view class="cityy-text">{{ child.name }}</view>
			            </view>
			           </view>
			      </view>
			    </view>
			
			  </view>
			
			
			<view class="advance" v-if="isShowSearch">
				<view class="filter-item">
					<view class="filter-name">
						租售类型
					</view>
					<view class="row">
							<u-checkbox 
										@change="checkboxChange" 
										v-model="item.checked" 
										v-for="(item, index) in checkList" :key="index" 
										:name="item.name"
									>{{item.name}}</u-checkbox>
					</view>
				</view>
				
				<view class="filter-item">
					<view class="filter-name">
						所属街道
					</view>
					<view class="row">
						<uni-data-select
						class="aa"
						     v-model="searchParams.lbsCity"
						     :localdata="cityRange"
							 :clear="false"
						     @change="change"
						   />
						<uni-data-select
						     v-model="searchParams.lbsRegion"
						     :localdata="areaList"
							 :clear="false"
						  @change="searchRegion(searchParams.lbsRegion)" 
						   />
						   <uni-data-select
						   style="width:132rpx"
						        v-model="searchParams.lbsStreet"
						        :localdata="streetList"
								:clear="false"
						        @change="change"
						      />
					</view>
				</view>
				
				
				<view class="filter-item">
					<view class="filter-name">
						面积
					</view>
					<view class="row">
						<input class="filter-input" placeholder="0" v-model="searchParams.baseAreaStart"  @blur="
                            searchParams.baseAreaStart = checkNum(
                    searchParams.baseAreaStart,4 )"/>
						<view class="filter-text">㎡ - </view>1
						<input class="filter-input" placeholder="0" v-model="searchParams.baseAreaEnd" @blur="
                            searchParams.baseAreaEnd = checkNum(
                                searchParams.baseAreaEnd,4 )" />
						<view class="filter-text">㎡ </view>
					</view>
				</view>	
				
				<view class="filter-item">
					<view class="filter-name">
						层数
					</view>
					<view class="row">
						<input class="filter-input" placeholder="0" v-model="searchParams.baseFloorStart"/>
						<view class="filter-text">层 - </view>
						<input class="filter-input" placeholder="0"/>
						<view class="filter-text" v-model="searchParams.baseFloorEnd">层 </view>
					</view>
				</view>	
				
				
				<view class="filter-item">
					<view class="filter-name">
						首层层高
					</view>
					<view class="row">
						<input class="filter-input" placeholder="0" v-model="searchParams.baseFirstFloorHeightStart" @blur="
                            searchParams.baseFirstFloorHeightStart = checkNum(
                                searchParams.baseFirstFloorHeightStart,2 )"/>
						<view class="filter-text">m - </view>
						<input class="filter-input" placeholder="0"  v-model="searchParams.baseFirstFloorHeightEnd" @blur="searchParams.baseFirstFloorHeightEnd = checkNum(
                                searchParams.baseFirstFloorHeightEnd,2 )"/>
						<view class="filter-text">m </view>
					</view>
				</view>	
				
				
				<view class="filter-item">
					<view class="filter-name">
						二层以上层高
					</view>
					<view class="row">
						<input class="filter-input" placeholder="0" v-model="searchParams.baseOtherFloorHeightStart" @blur="
                            searchParams.baseOtherFloorHeightStart = checkNum(
                                searchParams.baseOtherFloorHeightStart,2 )"/>
						<view class="filter-text">m - </view>
						<input class="filter-input" placeholder="0" v-model="searchParams.baseOtherFloorHeightEnd" @blur="
                            searchParams.baseOtherFloorHeightEnd = checkNum(
                                searchParams.baseOtherFloorHeightEnd,2 )"/>
						<view class="filter-text">m </view>
					</view>
				</view>	
				
				<view class="filter-item">
					<view class="filter-name">
						单价
					</view>
					<view class="row">
						<input class="filter-input" placeholder="0" v-model="searchParams.baseSpecialPriceCostStart" />
						<view class="filter-text">元 - </view>
						<input class="filter-input" placeholder="0"  v-model="searchParams.baseSpecialPriceCostEnd"/>
						<view class="filter-text">元 </view>
					</view>
				</view>	
				
				
				<view class="filter-item">
					<view class="filter-name">
						总价
					</view>
					<view class="row">
						<input class="filter-input" placeholder="0" v-model="searchParams.baseSpecialTotalCostStart"/>
						<view class="filter-text">元 - </view>
						<input class="filter-input" placeholder="0" v-model="searchParams.baseSpecialTotalCostEnd"/>
						<view class="filter-text">元 </view>
					</view>
				</view>	
				
				
				<view class="row2">
					<view class="reset1"  @click="reset()">重置</view>
					<view class="row3">
						<view class="cancel1"  @click="cancel">取消</view>
						<view class="sure1"  @click="goSearch()">确定</view>
					</view>
				</view>
				
			</view>
		</view>
		
				<uni-popup ref="popup" type="bottom" v-model="showPop">
					
					<view class="pop">
					        <image src="'../../../static/images/nav-x.png'" class="pop-close" @click="closePop()">
							</el-image>
					        <view class="pop-title">选择查看方式</view>
					        <view class="pop-row">
					            <view class="pop-item" @click="go720()" style="margin-right:32rpx">
									   <image src="../../../static/images/720.png" class="pop-img">
					                <view class="pop-text">720°全景</view>
					            </view>
					            <view class="pop-item" @click="goTuwen()" style="margin-left:32rpx">
					                <image src="../../../static/images/tuwen.png" class="pop-img"></image>
					                <view class="pop-text">图文介绍</view>
					            </view>
					        </view>
					    </view>
				</uni-popup>

	</view>
</template>
<script type="text/javascript"
	src="https://webapi.amap.com/maps?v=1.4.22&key=e1f7e5e1a3999cf5c5547868c22a6463&plugin=AMap.DistrictSearch">
</script>
<script>
	import AMapLoader from '@amap/amap-jsapi-loader'
	window._AMapSecurityConfig = {
		securityJsCode: '317cd6dff49e8f1e111439e809cf499d'
	}
	export default {
		props: {
			searchName: String
		},
		data() {
			return {
				
				cityRange:[
					 { value: '370200', text: "青岛市" },
				],
				
				checkList:[
						{
							name: '租赁',
							checked: false,
							disabled: false,
							value: 'let',
									},
									{
										name: '买卖',
										checked: false,
										disabled: false,
										value: 'Sell'
									},
				],
				
				map: null,
				polygons: [],
				selectIndex: 0,
				selected: [
					'370000', '370200', '370214', '370214001'
				],
				streets: [{
					name: '城阳街道',
					value: [],
					lon: '120.388092',
					lat: '36.308142',
					adCode: '370214001'
				}, {
					name: '河套街道',
					value: [],
					lon: '120.165783',
					lat: '36.250427',
					adCode: '370214010'
				}, {
					name: '红岛街道',
					value: [],
					lon: '120.269562',
					lat: '36.215861',
					adCode: '370214009'
				}, {
					name: '棘洪滩街道',
					value: [],
					lon: '120.288198',
					lat: '36.311271',
					adCode: '370214004'
				}, {
					name: '流亭街道',
					value: [],
					lon: '120.37125',
				 lat: '36.262272',
					adCode: '370214003'
				}, {
					name: '上马街道',
					value: [],
					lon: '120.248588',
					lat: '36.277544',
					adCode: '370214005'
				}, {
					name: '夏庄街道',
					value: [],
					lon: '120.455543',
					lat: '36.236083',
					adCode: '370214002'
				}, {
					name: '惜福镇街道',
					value: [],
					lon: '120.498523',
					lat: '36.294714',
					adCode: '370214008'
				}],
				searchParams: {
					baseTitle: '',
					baseType: '' // Sell：出售, Let: 出租
				, 
					lbsProvince: '',
					lbsCity: '370200',
					lbsRegion: '',
					lbsStreet: '',
					baseAreaStart: '',
					baseAreaEnd: '',
					baseFloorStart: '',
					baseFloorEnd: '',
					baseFirstFloorHeightStart: '',
					baseFirstFloorHeightEnd: '',
					baseOtherFloorHeightStart: '',
					baseOtherFloorHeightEnd: '',
					baseSpecialPriceCostStart: '',
					baseSpecialPriceCostEnd: '',
					baseSpecialTotalCostStart: '',
					baseSpecialTotalCostEnd: ''

				},
				isShowSearch: false,
				districtSearch: null,
				regionList: [],
				mapZoom: 10,
				showPop: true,
				clickMaker: {},
				cityList: [],
				areaList: [],
				cityShow: false,
				streetList: [],
				clickAreaCode: '',
				clickStreetIndex: -1,
				circles: [],
				overlayGroups: null,
				letCount: 0,
				sellCount: 0,
				markers: [],
				isSat: false,
				layer1: '',
				areaData: [{
						name: '黄岛区',
						lon: 120.204626,
						lat: 35.966664,
						adCode: '370211'
					},
					{
						name: '市南区',
						lon: 120.418742,
						lat: 36.081553,
						adCode: '370202'
					},
					{
						name: '市北区',
						lon: 120.381156,
						lat: 36.093852,
						adCode: '370203'
					},
					{
						name: '崂山区',
						lon: 120.475571,
						lat: 36.113635,
						adCode: '370212'
					},
					{
						name: '李沧区',
						lon: 120.475571,
						lat: 36.113635,
						adCode: '370213'
					},
					{
						name: '城阳区',
						lon: 120.40281,
						lat: 36.313556,
						adCode: '370214'
					},
					{
						name: '即墨区',
						lon: 120.453755,
						lat: 36.395618,
						adCode: '370215'
					},
					{
						name: '胶州市',
						lon: 120.038835,
						lat: 36.269355,
						adCode: '370281'
					},

					{
						name: '平度市',
						lon: 119.976392,
						lat: 36.759904,
						adCode: '370283'
					},

					{
						name: '莱西市',
						lon: 120.524186,
						lat: 36.89503,
						adCode: '370285'
					},
				]
			}
		},

		mounted() {
			var chengyangStreet = require('../../../static/json/chengyang_street.json')
			var hetaoStreet = require('../../../static/json/hetao_street.json')
			var hongdaoStreet = require('../../../static/json/hongdao_street.json')
			var jihongtanStreet = require('../../../static/json/jihongtan_street.json')
			var liutingStreet = require('../../../static/json/liuting.json')
			var shangmaStreet = require('../../../static//json/shangma.json')
			var xiazhuangStreet = require('../../../static/json/xiazhuang.json')
			var xifuzhenStreet = require('../../../static/json/xifuzhen_street.json')
			this.streets[0].value = chengyangStreet.features[0].geometry.coordinates
			this.streets[1].value = hetaoStreet.features[0].geometry.coordinates
			this.streets[2].value = hongdaoStreet.features[0].geometry.coordinates
			this.streets[3].value = jihongtanStreet.features[0].geometry.coordinates
			this.streets[4].value = liutingStreet.features[0].geometry.coordinates
			this.streets[5].value = shangmaStreet.features[0].geometry.coordinates
			this.streets[6].value = xiazhuangStreet.features[0].geometry.coordinates
			this.streets[7].value = xifuzhenStreet.features[0].geometry.coordinates
			this.mapInit()
		
		},

		methods: {
			closePop(){
					this.$refs.popup.close()
			},
			openPop(){
					this.$refs.popup.open('center')
			},
			changeSat() {
				this.isSat = !this.isSat
				if (this.isSat) {
			 	this.layer1 = new this.$AMap.TileLayer.Satellite()
					this.map.add(this.layer1)
				} else {
					this.map.remove(this.layer1)
				}
			},
			showSearch() {
				this.isShowSearch = !this.isShowSearch
			},
			reset() {
				this.searchParams = {}
				this.searchParams.lbsCity = '370200'
			},
			cancel() {
				this.isShowSearch = false
			}

			,
			searchCity() {
				const obj = this.$pcaa['370000']
				for (const i in obj) {
					this.cityList.push({
						name: obj[i],
						value:i,
						adCode: i
					})
				}
			},
			searchArea() {
				const obj = this.$pcaa['370200']
				for (const i in obj) {
					this.areaList.push({
						name: obj[i],
						value:i,
						adCode: i
					})
				}
			},
			searchRegion(adCode) {
				this.clickStreetIndex = -1
				if (adCode == this.clickAreaCode) {
					this.clickAreaCode = ''
					return
				}
				this.clickAreaCode = adCode
				const obj = this.$pcaa[adCode]
				for (const i in obj) {
					this.streetList.push({
						name: obj[i],
						adCode: i
					})
				}
				console.log('streetList', this.streetList)
			},
			clickStreet(item, index) {
				this.cityShow = false
				this.clickStreetIndex = index
				this.map.remove(this.overlayGroups)
				this.queryByBasic({
					lnglat: null
				}, {
					lbsRegion: '',
					lbsStreet: item.adCode
				})
				this.statsStreet(item.adCode)
			},
			showCity() {
				this.cityShow = !this.cityShow
			},
			go720() {
				if (!this.clickMaker.multVrUrl) {
					this.$noIconTost('没有配置VR地址')
					return
				}
				this.closePop()
				this.showPop = false
				window.open(this.clickMaker.multVrUrl, '_blank')
			}

			,
			goTuwen() {
				if (!uni.getStorageSync('token')) {
					this.$noIconTost('请先登录')
				} else {
					console.log('this.clickMaker', this.clickMaker)
					this.showPop = false
							this.closePop()
					this.$emit('goDetail', this.clickMaker.id)
				}
			},
			changeSelect() {
				console.log('this.select', this.selected)
			},
			async goSearch() {
				if (this.overlayGroups) {
					this.map.remove(this.overlayGroups)
				}
				if (this.markers) {
					this.map.remove(this.markers)
				}

			 this.circles = []
				this.markers = []
				this.queryByBasic({
					lnglat: null
				}, this.searchParams)
				// if (this.searchParams.lbsStreet) {
				//   console.log('11')
				//   this.queryByBasic({ lnglat: null }, { lbsRegion: '', lbsStreet: this.searchParams.lbsStreet })
				//   this.statsStreet(this.searchParams.lbsStreet)
				// } else if (this.searchParams.lbsRegion) {
				//   console.log('22')
				//   this.statsRegion2(this.searchParams.lbsRegion)
				// } else {
				//   console.log('33')
				//   this.statsRegion()
				// }
				// const res = await this.$api.parkQuery(this.searchParams)
				// if (res.code == 200) {

				// }
			},
			select(index) {
			 this.selectIndex = index
				if (index == 0) {
					// Sell：出售, Let: 出租
					this.searchParams.baseType = index == 0 ? 'Let' : 'Sell'
					this.search()
				}
			}

			,
			async statsRegion() {

				let res = await this.$req({
					url: `/palm_peninsula/park/statsRegion`,
					method: 'get',
					data: {
						lbsCity: '370200'
					}
				})
				if (res.code == 200) {
					this.regionList = res.data
					this.getAreaDetail(this.regionList, 0)
				}
			},
			async statsRegion2(lbsRegion) {
				let res = await this.$req({
					url: `/palm_peninsula/park/statsRegion`,
					method: 'get',
					data: {
						lbsRegion: lbsRegion
					}
				})

				if (res.code == 200) {
					this.regionList = res.data
					this.getAreaDetail(this.regionList, 0)
				}
			},
			async statsStreet(adCode) {
					let res = await this.$req({
						url: `/palm_peninsula/park/statsStreet`,
						method: 'get',
						data: {
				 		lbsStreet: adCode,
							page: 1,
							limit: -1
						}
					})

					this.sellCount = 0
					this.letCount = 0
					if (res.code == 200) {
						if (res.data && res.data.length > 0) {
							res.data.forEach(item => {
								if (item.baseType == 'Sell') {
									this.sellCount++
								} else {
									this.letCount++
								}
							})
						}

						// this.regionList = res.data
						// this.getAreaDetail(this.regionList, 0)
					}
				}

				,
			getAreaDetail(data, index) {
				console.log('getAreaDetailgetAreaDetail', data[index].lbsRegion)

				data.forEach(elment => {
					this.areaData.forEach(item => {
						if (item.adCode == elment.lbsRegion) {
							elment.name = item.name
							elment.lat = item.lat
							elment.lng = item.lon
						}
					})
				})


				const that = this
				for (let i = 0; i < that.regionList.length; i++) {
					that.drawBounds(that.regionList[i].name + '</br>' + that.regionList[i].amount + '个' + '</br>' + '产业园',
						that.regionList[i].lng, that.regionList[i].lat, that.regionList[i])
				}
				that.overlayGroups = new that.$AMap.OverlayGroup(that.circles)
				that.map.add(that.overlayGroups)

			},
			async queryByBasic(mapInfo, data) {
				console.log(mapInfo, data)
				let res = await this.$req({
					url: `/palm_peninsula/park/queryByBasic`,
					method: 'get',
					data: data
				})

				this.map.remove(this.markers)
				this.markers = []
				if (res.code == 200) {
					this.mapZoom = 12
					this.map.setZoom(this.mapZoom)
					if (mapInfo.lnglat) {
						this.map.setCenter([mapInfo.lnglat.lng, mapInfo.lnglat.lat])
					} else {
						this.map.setCenter([res.data[0].lbsLon, res.data[0].lbsLat])
					}

					var icon = new this.$AMap.Icon({
						size: new this.$AMap.Size(24, 32),
						image: 'https://oss.port56.net.cn/Wechat:guan409932398/20230110/1673312538346.png',
						imageSize: new this.$AMap.Size(24, 32)
					})

					for (var i = 0; i < res.data.length; i++) {
						const marker = new this.$AMap.Marker({
							position: [res.data[i].lbsLon, res.data[i].lbsLat],
							icon: icon,
							offset: new this.$AMap.Pixel(0, -80),
							extData: res.data[i]
						})
						marker.setLabel({
							offset: new this.$AMap.Pixel(0, -30),
							content: "<div class='info'>" + res.data[i].baseTitle + '</div>' // 设置文本标注内容
								,
							direction: 'center' // 设置文本标注方位
						})
						marker.on('click', (e) => {

							if (uni.getStorageSync('token')) {
								this.showPop = true
										this.openPop()
								this.clickMaker = marker.getExtData()
							} else {
								this.$noIconTost('请先登录')
							}
						})
						this.markers.push(marker)
					}
					this.map.add(this.markers)
				}
			},
			async queryChengyangByBasic(mapInfo, data) {
				console.log(mapInfo, data)
				// const res = await this.$api.parkQuery({
				//   page: 1
				//   , limit: -1
				//   , lbsRegion: data.lbsRegion
				//   , lbsStreet: data.lbsStreet
				// })
				let res = await this.$req({
					url: `/palm_peninsula/park/queryByBasic`,
					method: 'get',
					data: {
						page: 1,
						limit: -1,
						lbsRegion: data.lbsRegion,
						lbsStreet: data.lbsStreet
					}
				})

				this.map.remove(this.markers)
				this.markers = []
				if (res.code == 200) {
					// this.mapZoom = 13
					// this.map.setZoom(this.mapZoom)
					if (mapInfo.lnglat) {
						this.map.setCenter([mapInfo.lnglat.lng, mapInfo.lnglat.lat])
					} else {
						this.map.setCenter([res.data[0].lbsLon, res.data[0].lbsLat])
					}
					this.drawBounds2(res.data)
				}
			},
			drawBounds(name, lon, lat, data) {
				const that = this
				const circle = new this.$AMap.Text({
					text: name,
					anchor: 'center' // 设置文本标记锚点
						,
					draggable: false,
					cursor: 'pointer',
					style: {
						display: 'flex',
						'justify-content': 'center',
						'align-items': 'center',
						'margin-bottom': '1rem',
						'border-radius': '50%',
						'background-color': '#3072F6',
						width: '4rem',
						height: '4rem',
						'text-align': 'center',
						'font-size': '7px',
						color: '#fff'
					},
					extData: data,
					position: [lon, lat]
				})
				circle.on('click', (e) => {
					console.log('clickclick111', circle.getExtData())
					this.map.remove(circle)
					if (circle.getExtData().lbsRegion == '370214' && !circle.getExtData().id) {
			 		this.queryChengyangByBasic(e, circle.getExtData())
					} else {
						console.log('clickclick222')
						this.queryByBasic(e, circle.getExtData())
					}
				})
				this.circles.push(circle)
				// that.map.add(this.circle)
			},
			drawBounds2(mData) {
				for (let i = 0; i < this.streets.length; i++) {
					for (let a = 0, l = this.streets[i].value.length; a < l; a++) {
						// 生成行政区划polygon
						const polygon = new this.$AMap.Polygon({
							strokeWeight: 1,
							path: this.streets[i].value[a],
							fillOpacity: 0.4,
							fillColor: '#80d8ff',
							zIndex: 10,
							strokeColor: '#0091ea'
						})
						this.polygons.push(polygon)
						mData.forEach(item => {
							if (item.lbsStreet == this.streets[i].adCode) {
								const circle = new this.$AMap.Text({
									text: this.streets[i].name + '</br>' + mData.length + '个' + '</br>' +
										'产业园',
			 					anchor: 'center' // 设置文本标记锚点
										,
									draggable: false,
									cursor: 'pointer',
									style: {
										display: 'flex',
										'justify-content': 'center',
										'align-items': 'center',
										'margin-bottom': '1rem',
										'border-radius': '50%',
										'background-color': '#3072F6',
										width: '4rem',
										height: '4rem',
										'text-align': 'center',
										'font-size': '7px',
										color: '#fff'
									},
									extData: item,
			 					position: [this.streets[i].lon, this.streets[i].lat]
								})
								circle.on('click', (e) => {
									console.log('clickclick333', e, circle.getExtData())
									this.map.remove(circle)
									if (circle.getExtData().lbsRegion == '370214' && !circle.getExtData()
										.id) {
										console.log('clickclic444', circle.getExtData())
										this.queryChengyangByBasic(e, circle.getExtData())
									} else {
										console.log('clickclick222', e)
										this.queryByBasic(e, circle.getExtData())
									}
								})
								this.map.add(circle)
							}
						})

						this.map.add(this.polygons)
					}
				}
				this.map.setFitView(this.polygons) // 视口自适应
			},

			mapInit() {
				AMapLoader.load({
					key: 'e1f7e5e1a3999cf5c5547868c22a6463' // 申请好的Web端开发者Key，首次调用 load 时必填
						,
					plugins: ['AMap.DistrictSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				}).then(() => {
					this.map = new this.$AMap.Map('map-container1', {
						zoom: this.mapZoom // 是否缩放
							,
						resizeEnable: true // 鼠标样式
							,
						center: [120.389104, 36.073007]
					})
					this.map.on('complete', () => {
						this.districtSearch = new this.$AMap.DistrictSearch({
							level: 'district'
						})
						if (this.searchName) {
							this.searchParams.baseTitle = this.searchName
							this.goSearch()
						} else {
							this.statsRegion()
						}
						this.searchCity()
						this.searchArea()
					})
				})

				//   setTimeout(() => {

				//     this.map.on('complete', () => {
				// 			console.log('completecomplete')
				//       AMapLoader.load({
				//         key: 'e1f7e5e1a3999cf5c5547868c22a6463' // 申请好的Web端开发者Key，首次调用 load 时必填
				//         , plugins: ['AMap.DistrictSearch'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
				//       })
				//         .then((AMap) => {
				// 			console.log('AMapAMapAMap',AMap)
				// 			AMap.plugin(['AMap.DistrictSearch'],()=>{

				// 			})


				//         })
				//         .catch((e) => {
				// 			console.log('5555')
				//           console.log(e)
				//         })
				//     })
				//   }, 1000)
			}

		}
	}
</script>
<style lang="scss">

	.amap-marker-label {
		border: 0;
		background-color: transparent;
	}

	.info {
		border-radius: 56rpx;
		height: 56rpx;
		min-width: 40rpx;
		background: #3072F6;
		font-size: 24rpx;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 36rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 24rpx;
		padding-right: 24rpx;
	}
</style>
<style lang="scss" scoped>
	/deep/.uni-select{
		width: 75%;
	}


.city-pp {
	z-index: 999;
    width: calc(100% - 64rpx);
    background: #F3F5F8;
    box-shadow: inset -16rpx -16rpx 40rpx 0px #FFFFFF;
    border-radius: 8rpx;
    display: flex;
    flex-direction: column;
    height: 1360rpx;
    overflow-y: scroll;
	padding-bottom: 120rpx;
}

.city-p {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.cityy {
    margin-top: 32rpx;
    width: calc(100% - 64rpx);
    height: 96rpx;
    background: #FFFFFF;
    box-shadow: 24rpx 4rpx 8rpx 0px rgba(0, 20, 77, 0.1);
    border-radius: 4rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.city-p-text {
    margin-left: 32rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #2A2F3E;
    line-height: 48rpx;
}

.city-arrow {
    margin-right: 32rpx;
    width: 48rpx;
    height: 48rpx;
}

.cityy-item {
    width: 100%;
    display: flex;
    height: 96rpx;
    align-items: center;

    .cityy-icon {
        margin-left: 64rpx;
        width: 40rpx;
        height: 40rpx;
    }

    .cityy-text {
        margin-left: 24rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #2A2F3E;
        line-height: 48rpx;
    }

}
	
	.pop {
	    width: calc(100% );
	    height: 612rpx;
	    background: linear-gradient(180deg, #F3F5F8 0%, #FAFBFC 100%);
	    box-shadow: 12rpx 12rpx 80rpx 0px rgba(0, 20, 77, 0.1);
	    border-radius: 8rpx;
	    border: 8rpx solid #FFFFFF;
	    display: flex;
	    position: relative;
	    flex-direction: column;
	}
	
	.pop-close {
	    top: 32rpx;
	    right: 32rpx;
	    width: 48rpx;
	    height: 48rpx;
	    position: absolute;
	}
	
	.pop-title {
	    margin-top: 60rpx;
	    width: 100%;
	    display: flex;
	    justify-content: center;
	    font-size: 40rpx;
	    font-weight: 600;
	    color: #111F3A;
	    line-height: 56rpx;
	}
	
	.pop-row {
	    margin-left: 48rpx;
	    margin-right: 48rpx;
	
	    margin-top: 52rpx;
	    display: flex;
	    justify-content: space-between;
	}
	
	.pop-img {
	    width: 304rpx;
	    height: 304rpx;
	}
	
	.pop-item {
	    width: 256rpx;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    justify-content: center;
	    cursor: pointer;
	}
	
	.pop-text {
	    margin-top: 24rpx;
	    font-size: 32rpx;
	    font-weight: 500;
	    color: #111F3A;
	    line-height: 48rpx;
	}
	
	
	.advance{
		position: relative;
		margin-top: 24rpx;
		z-index: 999;
		width: calc(100% - 48rpx);
		height: 920rpx;
		background:  #F3F5F8;
		box-shadow: #FFFFFF;
		border-radius: 8rpx;
		border: 4rpx solid #FFFFFF;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;
		padding-bottom: 120rpx;
		.row2{
			position: fixed;
			top:1148rpx;
			width: calc(100% - 51rpx);
			margin-right: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 112rpx;
			background: #FFFFFF;
			box-shadow: 4rpx -4rpx 8rpx 0px rgba(0,20,77,0.1);
			border-radius: 0px 0px 8rpx 8rpx;
		}
		.row3{
				display: flex;
		}
		.reset1{
			margin-left: 32rpx;
			width: 136rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 2rpx solid #4F5B75;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #4F5B75;
			line-height: 44rpx;
		}
		.cancel1{
			width: 136rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 2rpx solid #3072F6;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #3072F6;
			line-height: 44rpx;
		}
		.sure1{
					margin-left:20rpx;
					margin-right: 32rpx;
			width: 136rpx;
			height: 64rpx;
			background: #3072F6;
			border-radius: 4rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 44rpx;
		}
	}
	.filter-item{
		margin-top: 24rpx;
		width: calc(100% - 64rpx);
		margin-left: 32rpx;
		margin-right: 32rpx;
		background: #FFFFFF;
		box-shadow: 4rpx 4rpx 8rpx 0px rgba(0,20,77,0.1);
		border-radius: 4rpx;
		display: flex;
		flex-direction: column;
	
		.filter-name{
			margin-top: 24rpx;
			margin-left: 24rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #282D3B;
			line-height: 44rpx;
		}
		.filter-input{
			padding-left: 20rpx;
			width: 136rpx;
			height: 64rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			opacity: 0.6;
			border: 2rpx solid #646E88;
		}
		
		.filter-text{
			margin-left: 20rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #282D3B;
			line-height: 44rpx;
		}
		
		.row{
			margin-left: 24rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-bottom: 24rpx;
		}
		
	}
	
	

	.overview-map1 {
		width: 100vw;
		height: calc(100vh - 80rpx);
	}


	.main {
		width: 100%;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: white;
	}

	.col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.row {
		margin-top: 24rpx;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.search {
		z-index: 999;
		height: 96rpx;
		background: linear-gradient(270deg, #F3F5F8 0%, #E5EFFF 54%, #FAFBFC 100%) #F3F5F8;
		box-shadow: inset -16rpx -16rpx 40rpx 0px #FFFFFF;
		border-radius: 8rpx;
		border: 4rpx solid #FFFFFF;
		display: flex;
		align-items: center;
	}

	.input {
		border: 0;
		padding-left: 16rpx;
		flex: 1;
	}

	.input-text {
		margin-left: 24rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2A2F3E;
		line-height: 48rpx;
		flex: 1;
	}

	.blue-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.blue {
		margin-right: 16rpx;
		width: 64rpx;
		height: 64rpx;
		background: #3072F6;
		box-shadow: 4rpx 4rpx 8rpx 0px rgba(0, 20, 77, 0.1);
		border-radius: 4rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>
